<template>
  <div>
    <div class="main_label">
      <span>客户统计</span>
    </div>
    <Tabs
      v-model="customersTabVal"
      :animated="false"
      type="line"
      name="customersTab"
      @on-click="tabValChange">
      <TabPane label="线索" name="1" tab="customersTab"></TabPane>
      <TabPane label="来人" name="2" tab="customersTab"></TabPane>
      <div style="height: 250px">
        <chart-block ref="charts"></chart-block>
      </div>
      <template #extra>
        <span
          @click="changeMode('-1')"
          class="check_chart"
          v-if="(!hasShowClue && customersTabVal == 1) || (!hasShowVisitor && customersTabVal == 2)">
          立即维护
        </span>
        <span @click="checkChart('2')" class="check_chart" v-if="hasShowVisitor || hasShowClue">
          <Icon type="md-stats" />
          查看完整图表
        </span>
      </template>
    </Tabs>
  </div>
</template>

<script>
  import chartBlock from '@/components/echarts/eChartsBlock.vue'
  import chartsOption from '@/biz/buildingHome/charOption'
  import dailyChartsApi from '@/biz/buildingHome/dailyCharts'
  import dailyApi from '@/biz/buildingHome/home'

  export default {
    components: {
      chartBlock
    },
    data() {
      return {
        customersTabVal: '1',
        odlTabVal: '1',
        hasShowVisitor: false,
        hasShowClue: false,
        dateInfo: {}
      }
    },
    methods: {
      checkChart(type) {
        this.$emit('handelClick', { type })
      },
      changeMode(type) {
        this.$emit('changeMode', type)
      },
      tabValChange(val) {
        if (this.odlTabVal == val) return false
        this.odlTabVal = val
        this.getinfoData(this.dateInfo)
      },
      getinfoData(data) {
        this.dateInfo = data
        this.$refs.charts.showLoading()
        this.hasShowClue = data.templateAllList[0].hasShow
        this.hasShowVisitor = data.templateAllList[1].hasShow
        let clueFilterList = []
        let visitorFilterList = []
        data.templateAllList &&
          data.templateAllList[0].childModelConfig.map((item) => {
            if (item.dailyConfigShortName == '顾问录入') {
              item.dailyConfigShortName = '手动录入'
            }
            if (item.hasLock) {
              clueFilterList.push(item.dailyConfigShortName)
            }
          })
        data.templateAllList &&
          data.templateAllList[1].childModelConfig.map((item) => {
            if (item.hasLock && item.dailyConfigShortName != '线索转到访') {
              visitorFilterList.push(item.dailyConfigShortName)
            }
          })
        if (this.customersTabVal == 1) {
          if (!this.hasShowClue) {
            let text = dailyChartsApi.noDataTxt(2)
            let option = chartsOption.noData(text)
            this.$refs.charts.setOption(option)
          } else {
            let params = {
              type: 'optionBar',
              checkTime: dailyApi.resovleTime(5, data.currentDate),
              chartsType: '2',
              filterData: clueFilterList,
              TabVal: 1,
              unit: '组',
              page_type: 'list'
            }
            dailyChartsApi.getInfoData(params).then((res) => {
              this.loading = false
              let option = res.option
              this.$refs.charts.setOption(option)
            })
          }
        } else {
          if (!this.hasShowVisitor) {
            let text = dailyChartsApi.noDataTxt(2)
            let option = chartsOption.noData(text)
            this.$refs.charts.setOption(option)
          } else {
            let params = {
              type: 'optionBar',
              checkTime: dailyApi.resovleTime(5, data.currentDate),
              chartsType: '2',
              filterData: visitorFilterList,
              TabVal: 2,
              unit: '组',
              page_type: 'list'
            }
            dailyChartsApi.getInfoData(params).then((res) => {
              let option = res.option
              this.$refs.charts.setOption(option)
            })
          }
        }
      }
    },
    // 在父组件的mounted中调用setOption
    mounted() {
      // this.getinfoData()
    }
  }
</script>
<style lang="scss" scoped>
  .main_label {
    display: flex;
    justify-content: space-between;
    line-height: 20px;
    border-left: 5px solid #2b85e4;
    padding-left: 8px;
    font-size: 15px;
    margin-bottom: 15px;

    .delete_btn {
      color: #2d8cf0;
      cursor: pointer;
      margin-right: 10px;
      font-size: 13px;
    }
  }

  .check_chart {
    line-height: 36px;
    color: #2b85e4;
    margin-right: 20px;
    cursor: pointer;
  }
</style>
